import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import ReplyItem from '../item/';
import { WeaAlertPage, WeaLocaleProvider } from 'ecCom';
import { Spin } from 'antd';

const getLabel = WeaLocaleProvider.getLabel;

@inject('coworkMainStore')
@observer
class MyReplyList extends React.Component {
	constructor(props) {
		super(props);
	}
  componentDidMount() {
    const { coworkMainStore } = this.props;
    coworkMainStore.queryRelateMeList();
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.coworkId != this.props.coworkId) {
      const { coworkMainStore } = this.props;
      coworkMainStore.queryRelateMeList();
    }
  }
	render() {
    const { coworkMainStore, canReply, isCanAnonymous } = this.props;
    let { content } = coworkMainStore;
    content = toJS(content);
    let { relateMeList = [], replyListViewRight = 0, relateLoading } = content;
    if (replyListViewRight != 1) {
      return <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@wvuh7k`} style={{ height: 200, position: 'relative', paddingTop: '50px' }}><div>{getLabel(382663, '暂无权限')}</div></WeaAlertPage>;
    }
    if (relateLoading) {
      return <div style={{ height: 300 }}><div className="top40 align-center" style={{ position: 'relative' }}><Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@9fqhr1`} tip={`${getLabel(31230, '加载中')}...`} /></div></div>;
    }
    return (
      <div className="wea-cowork-reply-list">
        <div>
          {relateMeList && relateMeList.length > 0 ? relateMeList.map((record, index) => (<ReplyItem ecId={`${this && this.props && this.props.ecId || ''}_ReplyItem@m4dpxs@${record.id || index}`}
            {...record}
            canReply={canReply}
            operate={this.operate}
            isCanAnonymous={isCanAnonymous}
            submit={this.props.submit}
          />)) : (
            <div style={{ height: window.innerHeight }}>
              <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@a1zgwi`} icon="icon-coms-blank" paddingTop="40px">
                <div>{getLabel(83553, '暂无数据')}</div>
              </WeaAlertPage>
            </div>
          )}
        </div>
      </div>
    );
	}

  changePage = (current) => {
    const { coworkMainStore } = this.props;
    coworkMainStore.queryRelateMePage(current, this.props.scrollToTop);
  }
  operate = (params) => {
    const { coworkMainStore } = this.props;
    coworkMainStore.operateDicsuss(params, 'my');
  }
}

export default MyReplyList;
